<template>
  <div class="right">
    <cardmodel
      :width="440"
      :height="210"
      :title="'公告通知'"
      :titleIconUrl="noticeIcon"
    >
      <announcementNotice />
    </cardmodel>

    <cardmodel
      :width="440"
      :height="250"
      :title="'本月考勤情况'"
      :titleIconUrl="situationIcon"
    >
      <attendance-situation />
    </cardmodel>

    <div class="right_carousel">
      <el-carousel height="145px">
        <template v-if="advertsList.length !== 0">
          <el-carousel-item v-for="item in advertsList" :key="item.id">
            <img
              class="right_carousel-img"
              :src="base + item.cover"
              style="border-radius: 10px"
              @click="onClick(item)"
            />
          </el-carousel-item>
        </template>
        <img
          v-else
          class="right_carousel-img"
          src="../../assets/home/banner.png"
          style="border-radius: 10px"
        />
      </el-carousel>
    </div>

    <cardmodel
      :width="440"
      :height="260"
      :title="'财务统计'"
      :titleIconUrl="financialIcon"
    >
      <financialStatistics />
    </cardmodel>
  </div>
</template>

<script setup name="Right">
import { ref } from "vue";
import cardmodel from "./components/cardmodel.vue";
import financialStatistics from "./components/financialStatistics.vue";
import attendanceSituation from "./components/attendanceSituation.vue";
import announcementNotice from "./components/announcementNotice.vue";
import financialIcon from "@/assets/home/financial.png";
import situationIcon from "@/assets/home/situation.png";
import noticeIcon from "@/assets/home/notice.png";
import { getPCAdvertsApi } from "../../api/home/index";

const advertsList = ref([]);
const base = ref(import.meta.env.VITE_APP_BASE_API);

// 获取PC端广告列表
const getPCAdverts = () => {
  getPCAdvertsApi().then((res) => {
    if (res.code == 200 && res.data) {
      advertsList.value = res.data;
    } else {
      advertsList.value = [];
    }
  });
};
getPCAdverts();

// 点击广告跳转链接
const onClick = (item) => {
  if (item.type == 0) {
    // 图片类型
    window.location.href = item.link;
  } else if (item.type == 1) {
    // 代码类型
  } else if (item.type == 2) {
    // 视频类型
    window.location.href = base.value + item.video;
  }
};
</script>

<style scoped lang="scss">
.right {
  width: 440px;
  margin-left: 14px;

  &_carousel {
    width: 440px;
    margin-bottom: 16px;
    border-radius: 10px;

    &-img {
      width: 440px;
      height: 145px;
      cursor: pointer;
    }
  }
}
</style>
